<template>
  <div class="zcjl-detail">
    <!-- 基础信息 -->
    <div class="page-header jcxx">
      <div class="title">基础信息</div>
      <div class="same-item">
        <div class="title">自查时间</div>
        <div class="value">{{ detailInfo.zcsj }}</div>
      </div>
      <div class="same-item">
        <div class="title">自查人</div>
        <div class="value">{{ detailInfo.zcr }}</div>
      </div>
      <!-- <div class="same-item">
        <div class="title">备注</div>
        <div class="value">{{ detailInfo.bz }}</div>
      </div> -->
    </div>
    <!-- 房间问题 -->
    <div class="page-header fjwt">
      <div class="title">房间问题</div>
      <van-collapse v-model="activeNames">
        <van-collapse-item title="消防安全管理" name="1">
          <div class="cus-nr">
            <div class="same-nr">
              <div class="name">消防安全制度</div>
              <div class="value">{{ detailInfo.xfaqglXfaqzd }}</div>
            </div>
            <div class="same-nr">
              <div class="name">消防安全教育培训</div>
              <div class="value">{{ detailInfo.xfaqglXfaqjypx }}</div>
            </div>
            <div class="same-nr">
              <div class="name">防火检查</div>
              <div class="value">{{ detailInfo.xfaqglFhjc }}</div>
            </div>
            <div class="same-nr">
              <div class="name">备注</div>
              <div class="value">{{ detailInfo.xfaqglBz }}</div>
            </div>
          </div>
        </van-collapse-item>
        <van-collapse-item title="建筑防火消防设施" name="2">
          <div class="cus-nr">
            <div class="same-nr">
              <div class="name">消防车通道</div>
              <div class="value">{{ detailInfo.jzfhssXfctd }}</div>
            </div>
            <div class="same-nr">
              <div class="name">疏散通道、安全出口</div>
              <div class="value">{{ detailInfo.jzfhssAqck }}</div>
            </div>
            <div class="same-nr">
              <div class="name">应急照明、疏散指示标志</div>
              <div class="value">{{ detailInfo.jzfhssYjzm }}</div>
            </div>
            <div class="same-nr">
              <div class="name">外墙门窗上是否设置影响逃生、灭火求援的障碍物</div>
              <div class="value">{{ detailInfo.jzfhssZaw }}</div>
            </div>
            <div class="same-nr">
              <div class="name">灭火器、逃生绳、防毒面具等</div>
              <div class="value">{{ detailInfo.jzfhssFdmj }}</div>
            </div>
            <div class="same-nr">
              <div class="name">是否存在违反消防安全规定储存易燃易爆危险品</div>
              <div class="value">{{ detailInfo.jzfhssWxp }}</div>
            </div>
            <div class="same-nr">
              <div class="name">备注</div>
              <div class="value">{{ detailInfo.jzfhssBz }}</div>
            </div>
          </div>
        </van-collapse-item>
        <van-collapse-item title="治安检查情况" name="3">
          <div class="cus-nr">
            <div class="same-nr">
              <div class="name">视频监控是否达到要求</div>
              <div class="value">{{ detailInfo.zajcqkSp }}</div>
            </div>
            <div class="same-nr">
              <div class="name">四实登记情况核对</div>
              <div class="value">{{ detailInfo.zajcqkSsdjqk }}</div>
            </div>
          </div>
        </van-collapse-item>
        <van-collapse-item title="备注" name="4">
          <div>{{ detailInfo.bz }}</div>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>

<script>
import { xfzcDetail } from '@/api/xfgl'
export default {
  name: 'zcjl-detail',
  data() {
    return {
      activeNames: ['1'],
      id: '',
      detailInfo: {},
    }
  },
  created() {
    if(this.$route.query.id) {
      this.xfzcDetail()
    }
  },
  methods: {
    xfzcDetail() {
      xfzcDetail(this.$route.query.id).then(res => {
        console.log(res)
        if(res.code == 200) {
          this.detailInfo = res.data;
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.zcjl-detail {
  background: #F5F5F5;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  .page-header {
    background-color: #fff;
    padding: 16px;
    box-sizing: border-box;
    .title {
      color: rgba(51,51,51,1);
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 14px;
      line-height: 24px;
      letter-spacing: 0px;
      text-align: left;
      margin-bottom: 8px;
    }
  }
  .jcxx {
    background-color: #fff;
    padding: 16px;
    box-sizing: border-box;
    .title {
      color: rgba(51,51,51,1);
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 14px;
      line-height: 24px;
      letter-spacing: 0px;
      text-align: left;
      margin-bottom: 8px;
    }
    .same-item {
      display: flex;
      align-items: center;
      .title, .value {
        font-weight: normal;
        color: rgba(102,102,102,1);
        font-size: 12px;
        line-height: 22px;
      }
      .title {
        width: 100px;
      }
      .value {
        color: rgba(51,51,51,1);
      }
      .dsh {
        color: #FF8F1F;
      }
    }
  }
  .fjwt {
    margin-top: 12px;
    /deep/ .van-cell__title {
      text-align: left;
    }
    .cus-nr {
      border-radius: 9px;
      background: #E6F4FF;
      padding: 10px;
      .same-nr {
        display: flex;
        align-items: center;
        .name {
          color: #666666;
          font-size: 12px;
          line-height: 22px;
          letter-spacing: 0px;
          text-align: left;
          width: 210px;
          margin-right: 12px;
        }
        .value {
          color: #1677FF;
          font-size: 12px;
          line-height: 22px;
          letter-spacing: 0px;
          text-align: left;
        }
      }
    }
  }
}
</style>